import 'package:flutter/material.dart';
import 'package:flutter2/colors.dart';
import 'package:flutter2/ui/page_utils.dart';
import 'package:flutter2/utils/string.dart';
import 'package:flutter2/widget/base/base_container.dart';
import 'package:flutter2/widget/base/normal_button.dart';
import 'package:flutter2/widget/base/normal_text.dart';

class GuidePage extends StatelessWidget {
  const GuidePage({super.key});

  @override
  Widget build(BuildContext context) {
    return BaseContainer(
      width: double.infinity,
      height: double.infinity,
      backgroundImg: "bg_main".toImage(),
      child: SafeArea(
        child: Column(
          children: [
            Flexible(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    BaseContainer(
                      width: null,
                      margin: EdgeInsets.only(left: 16, bottom: 16, top: 10),
                      child: NormalText(
                        text: "Lemo Crédito Cash",
                        fontSize: 17,
                        fontColor: mainText,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    buildTop(),
                    BaseContainer(
                      width: null,
                      background: Colors.white,
                      radius: 10,
                      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                      child: Column(
                        children: [
                          getItem("ic_income", "Simulación de préstamo"),
                          getItem("ic_fina", "Comprobante de ingresos"),
                          getItem("ic_ques", "Cuestionario"),
                          getItem("ic_contact", "Verificación de contacto"),
                          getItem("ic_live", "Detección de personas reales"),
                        ],
                      ),
                    ),
                    BaseContainer(
                      width: null,
                      background: "0A0C381E".toColor(),
                      margin: EdgeInsets.symmetric(horizontal: 16),
                      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          BaseContainer(
                            backgroundImg: "ic_safe".toImage(),
                            width: 16,
                            height: 16,
                          ),
                          SizedBox(
                            width: 5,
                          ),
                          Expanded(
                            child: NormalText(
                              text:
                                  "Nos comprometemos a mantener su información en el más estricto secreto y no revelarla a terceros.",
                              fontColor: mainText,
                              fontSize: 12,
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            NormalButton(
              click: () {
                StepUtils.toInfoPage();
              },
              margin: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
              width: double.infinity,
              height: 45,
              text: "Comience ahora",
              fontSize: 16,
            )
          ],
        ),
      ),
    );
  }

  Widget getItem(String icon, String text) {
    return BaseContainer(
      width: null,
      margin: EdgeInsets.only(bottom: 10),
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      radius: 10,
      background: "1426C165".toColor(),
      child: Row(
        children: [
          BaseContainer(
            backgroundImg: icon.toImage(),
            width: 24,
            height: 24,
          ),
          SizedBox(
            width: 5,
          ),
          Expanded(
            child: NormalText(
              text: text,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          )
        ],
      ),
    );
  }

  BaseContainer buildTop() {
    return BaseContainer(
      margin: EdgeInsets.symmetric(horizontal: 16),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      background: Colors.white,
      radius: 10,
      width: double.infinity,
      child: Column(
        children: [
          BaseContainer(
            width: null,
            padding: EdgeInsetsGeometry.symmetric(horizontal: 16, vertical: 5),
            background: "1426C165".toColor(),
            radius: 10,
            child: NormalText(
              fontSize: 12,
              fontColor: btnColor,
              text: "Antes de solicitar, prepare su identificación oficial ytarjeta bancaria.",
            ),
          ),
          SizedBox(
            height: 15,
          ),
          NormalText(
            text: "Monto",
            fontColor: mainText2,
            fontSize: 14,
          ),
          SizedBox(
            height: 10,
          ),
          NormalText(
            text: r"$5000",
            fontColor: mainText,
            fontSize: 40,
            fontWeight: FontWeight.bold,
          ),
          SizedBox(
            height: 10,
          ),
          NormalText(
            textAlign: TextAlign.center,
            text: "De rellenar la información a obtener el préstamo, solo tardará de cinco a diez minutos.",
            fontColor: mainText2,
            fontSize: 12,
          ),
        ],
      ),
    );
  }
}
